// 定时器组件
import React, { useState, useRef } from 'react';
import './Timer.css';

const Timer: React.FC = () => {
  const [seconds, setSeconds] = useState(0);
  const [running, setRunning] = useState(false);
  const [mode, setMode] = useState<'timer' | 'countdown'>('timer');
  const [inputSeconds, setInputSeconds] = useState(''); 
  const [countdown, setCountdown] = useState(0);
  const timerRef = useRef<number | null>(null);

  const start = () => {
    if (mode === 'timer') {
      if (!running) {
        setRunning(true);
        timerRef.current = setInterval(() => {
          setSeconds(s => s + 1);
        }, 1000);
      }
    } else {
      if (!running && countdown > 0) {
        setRunning(true);
        timerRef.current = setInterval(() => {
          setCountdown(c => {
            if (c <= 1) {
              clearInterval(timerRef.current!);
              setRunning(false);
              return 0;
            }
            return c - 1;
          });
        }, 1000);
      }
    }
  };

  const stop = () => {
    setRunning(false);
    if (timerRef.current) clearInterval(timerRef.current);
  };

  const reset = () => {
    setRunning(false);
    if (timerRef.current) clearInterval(timerRef.current);
    if (mode === 'timer') {
      setSeconds(0);
    } else {
      setCountdown(0);
      setInputSeconds('');
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value.replace(/[^\d]/g, '');
    setInputSeconds(val);
    setCountdown(Number(val));
  };

  React.useEffect(() => {
    return () => { if (timerRef.current) clearInterval(timerRef.current); };
  }, []);

  return (
    <div className="timer">
      <div className="timer-mode-switch">
        <button
          onClick={() => { reset(); setMode('timer'); }}
          disabled={mode === 'timer'}
        >正计时</button>
        <button
          onClick={() => { reset(); setMode('countdown'); }}
          disabled={mode === 'countdown'}
          style={{ marginLeft: 8 }}
        >倒计时</button>
      </div>
      {mode === 'timer' ? (
        <div className="timer-display">{seconds} 秒</div>
      ) : (
        <div className="timer-countdown-block">
          <input
            type="text"
            className="timer-input"
            placeholder="输入秒数"
            value={inputSeconds}
            onChange={handleInputChange}
            disabled={running}
            style={{ width: 80, marginBottom: 8 }}
          />
          <div className="timer-display">{countdown} 秒</div>
        </div>
      )}
      <div className="timer-buttons">
        <button onClick={start} disabled={running || (mode === 'countdown' && countdown <= 0)}>
          {mode === 'timer' ? '开始' : '开始倒计时'}
        </button>
        <button onClick={stop} disabled={!running}>暂停</button>
        <button onClick={reset}>重置</button>
      </div>
      {mode === 'countdown' && !running && countdown === 0 && inputSeconds && (
        <div className="timer-finish">倒计时结束！</div>
      )}
    </div>
  );
};

export default Timer;
